﻿<!-- #layout name=blank-->
<div class="page-header">
    <h1 class="title">Event</h1>
</div>
<div data-bind="component: { name: 'kb-breadcrumb', params:[{
    name: 'SITES'
},{
    name: 'DASHBOARD'
},{
    name: Kooboo.text.common.Event
}] }"></div>
<div class="block-rules" id="J_RulesContainer">
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="btn-group navbar-btn">
                <button class="btn green" data-toggle="dropdown"><span>New rule</span> <i class="fa fa-angle-down"></i></button>
                <ul class="dropdown-menu" data-bind="foreach: ruleTypes">
                    <li>
                        <a href="#" data-bind="text: displayName, click: $root.addRule.bind($data, $root.rules) "></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="blank-page-text" data-bind="visible: rules().length === 0">
        <p>You do not have any rules yet.</p>
    </div>
    <div data-bind="sortable: { data: rules, connectClass: 'root-rules', options: { handle: '.sortable' } }" data-rules-prop="rules">

        <div data-bind="template: { data: $data, name: 'RuleTemplate-' + ruleType() }" class="top-level-rule-holder"></div>
    </div>
    <div data-bind="visible: shouldShowSaveButton">
        <button type="button" class="btn green" data-bind="click: save">Save</button>
    </div>
</div>
<condition-dialog params="modalShow: conditionDialogShow, conditionData: conditionData, conditionRule: conditionRule"></condition-dialog>
<activity-dialog params="modalShow: activityDialogShow, activityData: activityData, onSave: saveActivity"></activity-dialog>
<script>
    (function() {
        Kooboo.fieldEditor = {};
        Kooboo.contentFolderEditor = {};
    })()
</script>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/kooboo/Guid.js",
            "/_Admin/Scripts/kobindings.sortable.js",
            "/_Admin/Scripts/events/RuleType-IfElse.js",
            "/_Admin/Scripts/events/RuleType-Always.js",
            "/_Admin/Scripts/events/activityDialog.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js",
            "/_Admin/Scripts/lib/jquery-ui-customized.js",
            "/_Admin/Scripts/events/conditionsDialog.js",
            "/_Admin/Scripts/tableModel.js",
            "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.js"
        ])
        Kooboo.loadCSS([
            "/_Admin/Scripts/lib/bootstrap-switch/bootstrap-switch.min.css"
        ])
    })()
</script>
<script type="text/html" id="RuleTemplate-IfElse">
    <div class="panel panel-default J_Rule">
        <div class="panel-heading">
            <span class="sortable"><i class="glyphicon glyphicon-list"></i></span>
            <a class="btn btn-xs btn-link pull-left margin-right-10" data-bind="click: $root.toggleRule">
                <i class="fa fa-chevron-right" data-bind="css: { 'fa-chevron-right': !expanded(), 'fa-chevron-down': expanded }"></i>
            </a>
            <a class="btn btn-xs dark pull-right" data-bind="click: $root.removeRule" href="javascript:;"><i class="fa fa-minus"></i></a>
            <div data-bind="visible: !expanded(), template: { name: 'RuleSummaryTemplate-' + ruleType(), data: $data }"></div>
        </div>
        <div class="panel-body J_Detail" data-bind="visible: expanded">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-2">IF</label>
                    <div class="col-md-10">
                        <div class="condition">
                            <a class="label label-info" data-bind="html: window.RuleTypes['IfElse'].conditionsSummary($data), click: $root.ifelseRule.editCondition.bind($data, $data)"></a>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2">THEN</label>
                    <div class="col-md-10">
                        <div data-bind="sortable: { data: then, connectClass: $root.generateSortableConnectClass(), options: { handle: '.sortable' } }" data-rules-prop="then">
                            <div data-bind="template: { data: $data, name: 'RuleTemplate-' + ruleType() }"></div>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs blue" data-toggle="dropdown"><i class="fa fa-plus"></i></button>
                            <ul class="dropdown-menu">
                                <!-- ko foreach: $root.ruleTypes -->
                                <li>
                                    <a href="#" data-bind="click: $root.addRule.bind($data, $parent.then), text: displayNameWhenNotInTopLevel"></a>
                                </li>
                                <!-- /ko -->
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2">ELSE</label>
                    <div class="col-md-10">
                        <div data-bind="sortable: { data: $data['else'], connectClass: $root.generateSortableConnectClass(), options: { handle: '.icon.drag' } }" data-rules-prop="else">
                            <div data-bind="template: { data: $data, name: 'RuleTemplate-' + ruleType() }"></div>
                        </div>
                        <div class="dropdown">
                            <button type="button" class="btn btn-xs blue" data-toggle="dropdown"><i class="fa fa-plus"></i></button>
                            <ul class="dropdown-menu">
                                <!-- ko foreach: $root.ruleTypes -->
                                <li>
                                    <a href="#" data-bind="click: $root.addRule.bind($data, $parent['else']), text: displayNameWhenNotInTopLevel"></a>
                                </li>
                                <!-- /ko -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="RuleSummaryTemplate-IfElse">
    <div class="summary-text">
        <span>IF</span>
        <span class="label blue" data-bind="html: window.RuleTypes['IfElse'].conditionsSummary($data, '[' + Kooboo.text.component.event.noCondition + ']')"></span>
        <!-- ko if: then().length > 0 -->
        <span>THEN</span>
        <span class="label blue" data-toggle="expand-rule" data-bind="html: window.RuleTypes['IfElse'].branchSummary(then()), tooltip: window.RuleTypes['IfElse'].branchTooltip(then())"></span>
        <!-- /ko -->
        <!-- ko if: $data['else']().length > 0 -->
        <span>ELSE</span>
        <span class="label blue" data-toggle="expand-rule" data-bind="html: window.RuleTypes['IfElse'].branchSummary($data['else']()), tooltip: window.RuleTypes['IfElse'].branchTooltip($data['else']())"></span>
        <!-- /ko -->
    </div>
</script>
<script type="text/html" id="RuleTemplate-Do">
    <div class="panel panel-default J_Rule">
        <div class="panel-heading">
            <span class="sortable"><i class="glyphicon glyphicon-list"></i></span>
            <a class="btn btn-xs btn-link pull-left margin-right-10" data-bind="click: $root.toggleRule">
                <i class="fa fa-chevron-right" data-bind="css: { 'fa-chevron-right': !expanded(), 'fa-chevron-down': expanded }"></i>
            </a>
            <a class="btn btn-xs dark pull-right" data-bind="click: $root.removeRule" href="javascript:;"><i class="fa fa-minus"></i></a>
            <div data-bind="visible: !expanded(), template: { name: 'RuleSummaryTemplate-' + ruleType(), data: $data }"></div>
        </div>
        <div class="list-group-wrapper J_Detail" data-bind="visible: expanded">
            <ul class="list-group" data-bind="sortable: { data: activity, connectClass: $root.generateSortableConnectClass(), options: { handle: '.sortable' } }, visible: activity().length > 0">
                <li class="list-group-item">
                    <span class="sortable"><i class="glyphicon glyphicon-list"></i></span>
                    <a class="btn btn-xs pull-right gray" href="#" data-bind="click: $root.removeActivity.bind($data, $parent.activity)"><i class="fa fa-minus"></i></a>
                    <a class="btn btn-xs pull-right blue margin-right-10" href="#" data-bind="click: $root.editActivity.bind(this, $parent, $data)"><i class="fa fa-pencil"></i></a>
                    <span class="text" data-bind="text: name"></span>
                </li>
            </ul>
            <div class="btn-group">
                <button type="button" class="btn btn-xs blue dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus"></i></button>
                <!-- ko if: $root.availableCodes.length > 0 -->
                <ul class="dropdown-menu" data-bind="foreach: $root.availableCodes">
                    <li>
                        <a href="#" data-bind="text: displayName, click: $root.addActivity.bind(this, $parent, $data);"></a>
                    </li>
                </ul>
                <!-- /ko -->
                <!-- ko if: $root.availableCodes.length == 0 -->
                <ul class="dropdown-menu">
                    <li>
                        <a data-bind="click: $root.createCode, text: Kooboo.text.site.code.noActivityAndCreate" href="javascript:;"></a>
                    </li>
                </ul>
                <!-- /ko -->
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="RuleSummaryTemplate-Do">
    <div class="summary-text">
        <span>DO</span>
        <span class="label blue" data-toggle="expand-rule" data-bind="html: window.RuleTypes['Do'].activitiesSummary($data), tooltip: window.RuleTypes['Do'].activitiesTooltip($data)"></span>
    </div>
</script>
<script src="/_Admin/View/Events/Event.js"></script>